React 学习（一）

2023-06-09 01:24| 来源: 网络整理| 查看: 265

文章目录开始JSX文件模板语法注释组件class类组件函数式组件组件嵌套组件的样式1.style内联样式2.声明式style写法3.import导入外部css文件事件绑定 ref属性1.回调形式2.createRef() State

开始

全局下载create-react-app脚手架

npm i -g create-react-app

新建React项目工程

create-react-app myapp

清空src文件夹

src下新建入口index.js文件

import React from 'react' import {createRoot} from 'react-dom/client' // 创建root节点 const container = createRoot(document.getElementById('root')) //渲染节点 container.render(hello world)

启动

npm start

页面渲染出Hello World

JSX文件

jsx -->babel --> js对象 --->.render()--->dom元素--->插入

container.render(1111) //-----jsx----解析成-----下面js------- container.render(React.createElement('div', { id: 'divId', className: 'divClass' },'div中的内容')) 模板语法

大括号{} ，插入js表达式（类似vue的双大括号{{}}模版语法）

结果直接插入到页面中

注释

模板语法内，写上js的注释

{ //单行注释 /* 多行注释 */ } 组件 class类组件 import React from 'react' // 组件App类 class App extends React.Component { render() { return (hello App Component 哈哈) } } export default App

安装vscode react插件

rcc快速生成类组件模板

import React, { Component } from 'react' export default class App extends Component { render() { return ( App ) } } 函数式组件

React 16.8版本之前，函数式组件无状态

之后，有react hooks，有状态

…之后细说

function App(){ //记得括号包裹 return ( 我是函数值组件里的内容 ) } export default App 组件嵌套 import React, { Component } from "react" class Child extends Component { render(){ return 我是Child组件 } } class Parent extends Component { render() { return( 我是Parent组件 ) } } //当然可以使用函数式组件 function Child2(){ return Child2 普通函数组件 } 组件的样式 1.style内联样式

其中css样式命名为小驼峰命名法，单大括号，中的第二层括号其实是对象{}

import React, { Component } from 'react' export default class App extends Component { render() { return ( style内联css样式 ) } } 2.声明式style写法 import React, { Component } from 'react' export default class App extends Component { const sty = { backgroundColor:"red" } render() { return ( style内联css样式 ) } } 3.import导入外部css文件

webpack支持

import React, { Component } from 'react' import './css/xxx.css' export default class App extends Component { render() { return ( import 的css样式 { // 为了防止重名，一些标签修改了默认的属性名 } 用户名 ) } } import React, { Component } from 'react' import './css/04-index.css' //导出css模块，webpack支持 export default class App extends Component { render() { const myname = 'levyy' return ( {10+20} {myname} {myname? myname : 'noname'} style内联css样式 import 的css样式用户名 ) } } 事件绑定

事件都是小驼峰命名

例-给button绑定点击onClick事件

在 React 中，事件对象并不是原生的事件对象，而是 React 封装的合成事件对象（SyntheticEvent）。React 使用合成事件对象来提供跨浏览器的一致性，并在不同浏览器中处理事件的差异性。

import React, { Component } from 'react' export default class App extends Component { render() { return ( {/*方式1：回调函数*/} { console.log('click') }}>add {/*方式2：调用方法(this指向丢失，需要bind绑定)*/} add2 {/*方式3：组件属性函数方式*/} add2 {/*方式3：回调函数+组件属性函数方式（可以传参）*/} { this.handleClick4(event,'我是实际参数') }}>add4 ) } {/*接收event参数，获取当前event对象*/} handleClick2(event) { console.log('click2') } handleClick3 = (event) => { console.log('click3') } handleClick4 = (event, value) => { console.log('click4', value) } } ref属性

用来获取DOM元素或者组件实例

this.refs 形式的 ref 已经被弃用，不再推荐使用。现在，推荐使用回调形式的 ref 或 createRef() 创建的 ref。

1.回调形式 import React from 'react'; class App extends React.Component { //!!! myRef = null render() { return ( {/*！！！*/} { this.myRef = ref; }}> Hello, World! { console.log(this.myRef); // 访问 DOM 元素或组件实例 } ); } } 2.createRef() import React, { Component } from 'react' export default class App extends Component { //!!! myref = React.createRef() render() { return ( {/*!!!!*/} { console.log(this.myref.current) {/*注意.current*/} }}>点我 ) } } State

React 16.8之后函数组件借助react hooks也有状态，目前仅针对于class生命的组件

state 是用于管理组件内部状态的机制（概念上类似vue2 data）

对state数据进行修改，利用setState函数，调用这函数会触发render()函数更新

import React, { Component } from 'react' export default class App extends Component { //简写形式 /* state = { myShow : true } */ constructor(){ super() // 设置state this.state = { myShow: true } } render() { return ( { this.setState({ myShow: !this.state.myShow }) }}>{this.state.myShow ? '收藏' : '取消收藏'} ) } }

setState函数第二个参数为一个回调函数，可以获取setState修改后，当前最新的state数据

// class ... state = { count: 1 } render(){ return ( this.setState({ count: this.state.count + 1 }, ()=>{ console.log(this.state.count) //2 }) ) } ... //

setState是异步的

连续多次调用setState会被合并处理

处在同步逻辑中，setState异步更新状态和真实DOM

处在异步逻辑中（如setTimeOut），setState同步更新状态和真实DOM

接受第二个参数，回调函数，状态和DOM更新完以后就会调用

react18之后都是异步更新，除非是放在第二参数,回调函数中

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章